<div id="ApiKeyContainer">
  <p>
    <b>设置第三方应用程序接口密匙（API KEY）。</b>
  </p>
  <p>
    <small>若此用户是管理员用户，那么密匙将可以"管理用户","管理所有服务器","获取高级信息"</small>
  </p>
  <p>
    <small>若此用户是普通用户，则仅仅能管理其名下的所有服务器与获取部分信息。</small>
  </p>

  <div class="input-group">
    <span class="input-group-addon">API KEY</span>
    <input type="text" class="form-control" v-model="API_KEY" placeholder="关闭" />
  </div>

  <p style="color: rgb(230, 55, 55)">此字段至关重要，切勿泄露，复制给其他人。</p>

  <p>
    留空则代表关闭此用户 API 功能 |
    <a href="https://github.com/Suwings/MCSManager/wiki/API-Documentation" target="_blank"><b>接口开发文档（推荐）</b></a>
  </p>

  <button class="btn btn-success" v-on:click="updateKey()">更新 KEY</button>
  <button class="btn btn-success" v-on:click="deleteKey()">删除/关闭 KEY</button>
  &nbsp;|&nbsp;
  <button class="btn btn-danger" v-on:click="TOOLS.popWindClose();">关闭</button>
</div>
<script>
  new Vue({
    el: "#ApiKeyContainer",
    data: {
      API_KEY: ""
    },
    methods: {
      updateKey: function () {
        var that = this;
        WS.sendMsg("apikey/update", PAGE.username, function (obj) {
          var API_KEY = obj.ResponseValue;
          that.API_KEY = API_KEY;
        });
      },
      deleteKey: function () {
        var that = this;
        WS.sendMsg("apikey/delete", PAGE.username, function (obj) {
          var API_KEY = obj.ResponseValue;
          that.API_KEY = API_KEY;
        });
      }
    },
    mounted: function () {
      var that = this;
      WS.sendMsg("apikey/get", PAGE.username, function (obj) {
        var API_KEY = obj.ResponseValue;
        that.API_KEY = API_KEY;
      });
    }
  });
</script>
